<template>
    <div class="words_cont cur">
        <template v-for="(item,index) in word.options">
            <div class="item" :class="{right: (actived == item.prefix || actived) && word.corrects == item.prefix, wrong: actived == item.prefix && word.corrects != item.prefix}" @click="isChoose ? chooseFun(item) : ''">
                {{ item.content }}
                <img v-if="(actived == item.prefix || actived) && word.corrects == item.prefix" src="@/assets/img/yes.png" alt="">
                <img v-if="actived == item.prefix && word.corrects != item.prefix" src="@/assets/img/close_1.png" alt="">
            </div>
        </template>
        <div class="item" :class="{wrong: actived == '不认识'}" @click="isChoose ? chooseFun() : ''">
            不认识
            <img v-if="actived == '不认识'" src="@/assets/img/close_1.png" alt="">
        </div>
    </div>
</template>

<script>
export default {
    props: {
        word: {type: Object, default: {}},
        isChoose: {type: Boolean, default: true}
    },
    data() {
        return {
            actived: false
        }
    },
    mounted(){
    },
    methods:{
        initActived() {
            this.actived = false
        },
        async chooseFun(row) {
            if (!row) {
                this.actived = '不认识'
                let obj = this.word
                obj.answer = '不认识'
                this.$emit("answer", obj)
            }else{
                this.actived = row.prefix
                let obj = this.word
                obj.answer = row.prefix
                this.$emit("answer", obj)
            }
        }
    }
}
</script>

<style lang="scss" scoped>
@import "~@/styles/mixins.scss";
.words_cont{
    width: 100%;
    height: 0;
    flex: 1;
    margin-top: .2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    .item{
        width: 49%;
        padding:4rem;
        text-align: center;
        font-size: 3rem;
        color: #3A3F5E;
        border-radius: 10px;
        background: #F7F8FA;
        margin-bottom: 1rem;
        &:hover{
            background: #E6FFEC;
            color: #40D463;
        }
        img{
            width: 4rem;
            height: 4rem;
            float: right;
        }
    }
    overflow-y: scroll;
        &::-webkit-scrollbar {
            width: 6px;
            height: 1px;
            }
        &::-webkit-scrollbar-thumb { 
            border-radius: 5px;
            background-color:#019E69;
        }
        &::-webkit-scrollbar-track { 
            background: #fff;
            border-radius: 5px;
        }
}

// @media screen and (min-width: 1024px) and (max-width: 1500px) {
//     .words_cont{
//         width: 100%;
//         height: 0;
//         flex: 1;
//         margin-top: .2rem;
//         display: flex;
//         justify-content: space-between;
//         align-items: center;
//         flex-wrap: wrap;
//         .item{
//             width: 49%;
//             padding: 2.4rem 2rem;
//             text-align: center;
//             font-size: 1.5rem;
//             color: #3A3F5E;
//             border-radius: 10px;
//             background: #F7F8FA;
//             &:hover{
//                 background: #E6FFEC;
//                 color: #40D463;
//             }
//             img{
//                 width: 2rem;
//                 height: 2rem;
//                 float: right;
//             }
//         }
            
//     }
// }

.right{
    background: #E6FFEC !important;
    color: #40D463 !important;
}

.wrong{
    background: #FFF1F1 !important;
    color: #FF5252 !important;
}

</style>